プルダウンメニューをデザイン化する！
今回は、プルダウンメニューをデザイン化する方法を解説します。プルダウンメニューでは、SELECTタグやOPTIONタグにスタイルシート（CSS）を指定することにより、文字サイズや文字色、背景色を自由に指定できます。ぜひ試してみてください。 サンプルページ

→ プルダウンメニューの文字サイズを変更する
 
まずは、プルダウンメニュー内の文字サイズを変更する方法を解説します。文字サイズを変更する場合は、SELECTタグに「font-size」のスタイルシートを指定します。文字サイズは、ポイント（pt）の数値だけでなく、「large」や「x-large」などで指定することも可能です。
<FORM>
以下から1つ選択してください。<BR>
<SELECT name="goodpage" style="font-size:16pt">
<OPTION>HTMLの解説</OPTION>
<OPTION>スタイルシートCSSの解説</OPTION>
<OPTION>JavaScriptの解説</OPTION>
</SELECT>
</FORM>		 サンプルページ


→ プルダウンメニューの文字色を変更する
 
次は、プルダウンメニュー内の文字について文字色を変更する方法を紹介します。文字色を変更する場合は、各OPTIONタグに対して「color」のスタイルシートを指定します。以下のように、それぞれのメニューごとに文字色を変更することも可能です。
<FORM>
以下から1つ選択してください。<BR>
<SELECT name="goodpage" style="font-size:16pt">
<OPTION style="color:#FF0000">HTMLの解説</OPTION>
<OPTION style="color:#333399">CSSの解説</OPTION>
<OPTION style="color:#339933">JavaScriptの解説</OPTION>
</SELECT>
</FORM>		 サンプルページ


→ プルダウンメニューの背景色を変更する
 
OPTIONメニューに「background-color」のスタイルシートを指定すると、メニューの背景色を変更することができます。今回は、全てのOPTIONタグに同じ色（#FFDAB9）を指定しましたが、これを個別に変更し、カラフルなプルダウンメニューを作成することも可能です。
<FORM>
以下から1つ選択してください。<BR>
<SELECT name="goodpage" style="font-size:16pt">
<OPTION style="color:#FF0000; background-color:#FFDAB9">HTMLの解説</OPTION>
<OPTION style="color:#333399; background-color:#FFDAB9">CSSの解説</OPTION>
<OPTION style="color:#339933; background-color:#FFDAB9">JavaScriptの解説
</OPTION>
</SELECT>
</FORM>
 サンプルページ


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��